<template>
  <div v-html="html"></div>
</template>

<script setup>
import MarkdownIt from 'markdown-it';
import highlight from 'markdown-it-highlightjs';
import hljs from 'highlight.js';

// 创建 MarkdownIt 实例
const md = new MarkdownIt({
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value;
      } catch (_) {}
    }

    return ''; // 未识别的语言或高亮失败时返回空字符串
  }
});

// 使用插件
md.use(highlight);

const markdown = "1、帮我生成井A的<button_start>井A的试气地质设计报告<button_end>\n            2、帮我生成井A的**试气工程设计**报告\n            3、帮我生成井A的**钻井地质设计**报告\n            4、帮我生成井A的**钻井工程设计**报告      "

// 解析 Markdown 文本
const renderedMarkdown = md.render(markdown);

// 提取所有 [status] 标记的进度信息
const statusUpdates = renderedMarkdown.match(/\[status\] 处理中，处理进度 (\d+)\/(\d+)/g);

// 仅保留最后一个 [status] 标记的进度信息
let lastStatusUpdate = '';
if (statusUpdates && statusUpdates.length > 0) {
  lastStatusUpdate = statusUpdates[statusUpdates.length - 1];
}

// 删除除最后一个 [status] 标记之外的所有 [status] 标记的内容
let processedMarkdown = renderedMarkdown.replace(/\[status\] 处理中，处理进度 (\d+)\/(\d+)/g, (_, complete, total) => {
  if (lastStatusUpdate !== `[status] 处理中，处理进度 ${complete}/${total}`) {
    return '';
  }
  const progress = parseInt(complete, 10) / parseInt(total, 10);
  const percent = `${(progress * 100).toFixed(2)}%`;
  return `<p>处理进度 <progress value="${progress * 100}" max="100"></progress> ${percent}</p>`;
});
console.log(`processedMarkdown:${processedMarkdown}`)
processedMarkdown = processedMarkdown.replaceAll("<p></p>", "")
processedMarkdown = processedMarkdown.replace(/&lt;button_start&gt;/g, "<button>").replace(/&lt;button_end&gt;/g, "</button>");

console.log(`processedMarkdown:${processedMarkdown}`)
// 最终的HTML字符串
const html = processedMarkdown;
</script>

<style scoped>
p {
  margin: 0 0 10px 0;
}

/* 自定义进度条样式 */
progress {
  display: block;
  margin-top: 0;
  margin-bottom: 0;
}
/* 添加对预格式化文本（<pre>）的样式控制 */
pre {
  background-color: #282a36; /* 背景色可以根据需要调整 */
  border: 1px solid #444; /* 边框颜色也可以根据需要调整 */
  padding: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
  white-space: pre;
  font-family: 'Courier New', Courier, monospace; /* 使用等宽字体 */
}
</style>